<template>
  <div class="brand-zone-container">
    <header class="page-header">
      <h1>品牌专区</h1>
      <router-link to="/" class="back-link">返回首页</router-link>
    </header>
    <div class="section brand-zone-section">
      <el-row :gutter="20">
        <el-col :span="8" v-for="brand in brands" :key="brand.name">
          <BrandCard :brand="brand" />
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import BrandCard from '../components/BrandCard.vue';

const brands = ref([
  {
    name: "绿禾园 (GreenField Organics)",
    image: new URL(`../assets/image/b1.png`, import.meta.url).href,
    description:
      "绿禾园致力于提供高品质的有机食品，品牌源自对自然与健康生活方式的热爱。我们从田间到餐桌，始终坚持无化肥、无农药、无转基因的生产理念，严格按照国际有机认证标准生产。每一款绿禾园产品都经过严密的农田管理和多次检测，确保每一口都纯净、安全且富含营养。我们不仅关注食品的绿色环保，更倡导健康生活方式的传播，让每个家庭都能享受到最天然、最健康的美味。",
    featuredProducts: "有机蔬菜、有机果汁、有机粮食",
    mission:
      "为消费者提供纯净、绿色、健康的食品选择，保护环境，倡导可持续发展。",
  },
  {
    name: "生机园 (BioHarvest)",
    image: new URL(`../assets/image/b2.png`, import.meta.url).href,
    description:
      "生机园是一个以“天然有机，绿色生活”为理念的品牌，专注于提供有机农产品和生活用品。我们的农场采取轮作、堆肥等生态农业方式，保持土壤的肥沃和生态的平衡，确保每一粒农作物都能自然生长。我们相信，只有尊重自然的种植方式，才能孕育出更健康、更美味的食材。",
    featuredProducts: "有机茶叶、有机谷物、有机蜂蜜",
    mission:
      "打造一个绿色、有机、可持续的品牌，传播有机食品文化，推动人类健康和地球环保的双重目标。",
  },
  {
    name: "绿缘 (GreenBond)",
    image: new URL(`../assets/image/b3.png`, import.meta.url).href,
    description:
      "绿缘品牌立足于现代绿色科技与传统有机农业的结合，致力于将最天然的绿色产品带入千家万户。我们的产品线涵盖了各类有机食品以及有机护肤品，从原料到生产过程，每一步都秉承绿色环保的原则。绿缘提倡“绿色与美丽并存”，不仅为消费者提供健康食材，还通过有机护肤系列，让每个人都能感受到自然馈赠的美好。",
    featuredProducts: "有机果蔬、有机护肤系列、有机香料",
    mission:
      "通过创新的绿色科技，让有机产品成为大众日常生活的自然选择，推动绿色生活的普及。",
  },
]);
</script>

<style scoped>
.brand-zone-container {
  padding: 20px;
}
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.back-link {
  text-decoration: none;
  color: var(--el-color-primary);
}
.brand-zone-section {
  background-color: #fafafa;
  padding: 40px 30px;
}
</style> 